<head lang="en">
    <meta charset="UTF-8">
    <title>仿知乎头像裁剪</title>
    <link rel="stylesheet" href="imgCut.css" type="text/css" />
    <style>
        .su_body{
            border:1px solid blue;
            position:relative;
            width:500px;
            height:500px;
            padding:20px 0;
        }
        .su_imgCut{
            border:1px solid green;
            width:300px;
            height:300px;
            margin: 0 auto 30px;
            cursor: move;
            position: relative;
        }
        /*.mark{*/
            /*position:absolute;*/
            /*height:100px;*/
            /*width:100px;*/
            /*left:50%;*/
            /*top:50%;*/
            /*margin:-50px -50px;*/
            /*z-index:10;*/
            /*border:1px solid #000;*/
            /*cursor:move;*/
        /*}*/
    </style>
</head>
<body>

边界 有bug
<input type="range" step="0.1" min="1" max="2" class="RangeInput" value="1" id="rangIput" oninput="canvasSize()">


<div class="su_body">
    <div class="su_imgCut" id = "su_imgCut">
        <canvas id="c1" style="width: 300px; height: 300px;"></canvas>
    </div>
    <input type="file" value="上传文件" >

    <div class="su_scale">
        <span class="su_scale_left" onClick="scaleAdd(-10, 200, 0)"> - </span>
        <!--进度条-->
        <div id="su_scale_down">
            <!--条-->
            <div id="su_scale_top" style="width:10px;">
            </div>
            <!-- 点-->
            <span id="su_scale_dot"></span>
        </div>
        <span class="su_scale_right" onClick="scaleAdd(+10, 200, 0)"> + </span>
    </div>
</div>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="../imgCut.js"></script>
</body>
</html>
</body>
</html>